<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <style>
    div svg {
      border: 1px solid orange;
    }
  </style>
  <body>
    <!-- <div id="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <div>
        <p>4</p>
      </div>
    </div>
    <div>div2</div>

    <svg width="600" height="600">
      <rect x="100" y="100" width="300" height="20"></rect>
    </svg> -->
    <div id="svg"></div>
    <script>
      // const data = [100, 200 ,30, 500]
      // d3.select('body').selectAll('p')
      //   .data(data)
      //   .enter()
      //   .append('p')
      //   .text('asd')

      // console.log(d3.select('#box p')) // 获取box下第一个p元素
      // console.log(d3.selectAll('#box p')) // 获取box下所有 p元素
      // console.log(d3.select('rect').attr('width')) // 获取rect属性
      // 设置属性
      // d3.select('rect')
      //   .attr('fill', 'green')
      //   .attr('transform', 'translate(100, 100)')
      // 添加元素
      // d3.select('svg').append('rect')
      //   .attr('x', 100)
      //   .attr('y', 200)
      //   .attr('width', 200)
      //   .attr('height', 200)
      //   .attr('fill', 'red')
      // 删除元素
      // d3.select('svg').append('text')
      //   .attr('x', 50)
      //   .attr('y', 50)
      //   .text('asdasd')
      // d3.select('svg text').remove()

      // enter update exit
      // const data = [
      //   {cx: 100, cy: 200, r: 10, fill: 'orange'},
      //   {cx: 120, cy: 200, r: 10, fill: 'orange'},
      //   {cx: 140, cy: 200, r: 10, fill: 'orange'},
      //   {cx: 160, cy: 200, r: 10, fill: 'orange'}
      // ]

      // d3.select('svg').selectAll('circle')
      //   .data(data)
      //   .enter() // 新增
      //   // .update() // 修改
      //   // .exit() // 删除
      //   .append('circle')
      //   .attr('cx', (d) => d.cx)
      //   .attr('cy', (d) => d.cy)
      //   .attr('r', (d) => d.r)
      //   .attr('fill', (d) => d.fill)

      // 绘制柱状图
      const width = 700
      const height = 400
      const rectStep = 40
      const rectWdith = 30
      const data = [60, 50, 200, 234, 235]
      const margin = {
        left: 50,
        top: 10,
        right: 10,
        bottom: 50
      }

      // const linear = d3
      //   .scaleLinear()
      //   .domain([d3.min(data), d3.max(data)])
      //   .range([1, 300])
      // 线性比例尺
      // const data = [10, 50, 200, 234, 435, 123, 345, 23, 76, 2]
      // const min = d3.min(data)
      // const max = d3.max(data)

      // const linear = d3.scaleLinear()
      //   .domain([min, max])
      //   .range([0, 300])
      //   console.log(linear(435))

      // // 创建svg
      d3.select('#svg').append('svg').attr('width', width).attr('height', height)

      // x轴坐标刻度生成
      const kindData = ['ES6+', 'Vue', 'React', 'Angular', 'NodeJs']
      const kindPixel = [margin.left, width - margin.right]
      const ratioPixel = [height - margin.bottom, margin.top]
      const xScale = d3.scaleBand().domain(kindData).rangeRound(kindPixel)
      const xAxis = d3.axisBottom(xScale)
      d3.select('svg')
        .append('g')
        .call(xAxis)
        .attr('transform', `translate(0,${height - margin.bottom})`)
      // y轴坐标刻度生成
      const yScale = d3
        .scaleLinear()
        .domain([0, d3.max(data)])
        .range(ratioPixel)
      const yAxis = d3.axisLeft(yScale)
      d3.select('svg').append('g').call(yAxis).attr('transform', `translate(${margin.left},0)`)
      // 绘制矩形
      d3.select('svg')
        .selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width', rectWdith)
        .attr('height', d => yScale(d))
        .attr('x', (d, i) => xScale(kindData[i]) + rectStep)
        .attr('y', d => height - yScale(d) - margin.bottom)
        .attr('fill', 'blueviolet')
      // 绘制文字
      d3.select('svg')
        .selectAll('text')
        .data(data)
        .enter()
        .append('text')
        .attr('x', (d, i) => i * rectStep + rectWdith / 2 + margin.left)
        .attr('y', d => height - linear(d) - 5 - margin.bottom)
        .attr('text-anchor', 'middle')
        .attr('fill', '#666')
        .text(d => d)
    </script>
  </body>
</html>
